<template>
  <div>
    <div class="table_card">
      <div class="table_card_top">
        <span class="pl_left"></span>
        <div class="rules_title">手工扣减</div>
      </div>
      <div class="Parameter_form">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="120px"
          label-position="top"
          class="demo-ruleForm"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item label="手工扣减金额" prop="money">
                <div class="iptBox">
                  <div class="ipt_numberBox">
                    <el-input-number
                      v-model="ruleForm.money"
                      placeholder="请输入"
                      class="w-300 text-left"
                      :precision="2"
                      :min="0"
                      :controls="false"
                    ></el-input-number>
                  </div>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div class="el_btn_bottom">
          <el-button type="primary" @click="SaveProjectCom">保存</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getDeduction, CreateDeduction } from "@/api/bpm/handcommission2025";
export default {
  name: "Storeadminhandcommission2025",

  data() {
    return {
      ruleForm: {
        money: "",
      },
      rules: {
        money: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      total: 0,
      ProjectCom: [],
    };
  },

  created() {
    this.getDeductionQuery();
  },

  mounted() {},

  methods: {
    // 保存手工扣减
    SaveProjectCom() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.CreateProjectCom();
        }
      });
    },

    resQ() {
      this.getDeductionQuery();
    },

    // 查询手工扣减
    getDeductionQuery() {
      this.loading = true;
      getDeduction({})
        .then((res) => {
          console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ruleForm.money = data;
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    CreateProjectCom() {
      this.loading = true;
      CreateDeduction(this.ruleForm)
        .then((res) => {
          //   console.log(res);
          this.loading = false;
          const { code, data } = res;
          if (code === 0) {
            this.ProjectCom = data.list;
            this.getDeductionQuery();
            this.$message.success("操作成功");
          }
        })
        .catch((err) => {
          this.loading = false;
        });
    },

    // 表单重置
    resetFormData(formName) {
      // console.log(this.$refs[formName]);
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.pl_left {
  padding-left: 24px;
}
.rules_title {
  font-weight: bolder;
  font-size: 18px;
}
.Parameter_form {
  padding-left: 20px;
  position: relative;
  padding-bottom: 100px;
}
.ipt_iner {
  margin-top: 10px;
  .ipt_number {
    position: relative;
    .percent {
      position: absolute;
      top: 10px;
      right: 10px;
      color: #333;
      font-size: 15px;
    }
  }
  .yuan {
    position: absolute;
    top: 10px;
    right: 10px;
    color: #333;
    font-size: 15px;
  }
}
.el_btn_bottom {
  position: absolute;
  left: 800px;
  bottom: 20px;
}
.iptBox {
  .ipt_numberBox {
    position: relative;
    .percent {
      position: absolute;
      left: 280px;
      top: 1px;
    }
    .priceIcon {
      position: absolute;
      left: 310px;
      top: 1px;
    }
  }
}

.comeBox {
  position: relative;
  .comeOn {
    display: flex;
    .Come_ipt {
      width: 80px;
      margin: 0 10px;
      .el-input-number {
        width: 80px;
      }
    }
    .percent {
      position: absolute;
      left: 430px;
    }
  }
}
</style>
